<template>
  <div class="container">
    <div class="top">
      <img src="" alt="" />
      <div class="desc">
        <div class="name">荤素双人套餐</div>
        <div class="name_content">
          <div class="text">
            <span>月售68份 好评率 100%</span>
          </div>
          <div class="btn">
            <span>icon</span>
            <button>加入购物车</button>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
        <h2>商品介绍</h2>
        <p>一碗皮蛋瘦肉粥，总是男男女女</p>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class extends Vue {
  get x_goods(): any {
    return this.$store.state.goods;
  }

  mounted() {
    console.log(this.x_goods);
  }
}
</script>

<style scoped lang="scss">
.container {
  background: #888;
  .top {
    img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }
    .desc{
        .name{
            font-weight: bold;
        }
        .name_content{
            .text{

            }
        }
    }
  }
}
</style>